<template>
    <div class="topicDetail">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="分类详情"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <!-- 详情 -->
        <div class="info" v-if="data.data" v-html="data.data.content">
        </div>
        <div class="list">
            <div class="title">
                <div class="title-in">专题推荐</div>
            </div>
            <ul class="items">
                <li
                    class="item"
                    v-for="(item, index) in data.recommendList"
                    :key="index"
                >
                    <img :src="item.scene_pic_url" alt="">
                    <div>{{item.title}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { getTopicDetailInfo } from '@/api/topic/index'

    export default {
        data() {
            return {
                data: ''
            }
        },
        methods: {
            // 返回
            onClickLeft() {
                this.$router.go(-1);
            },
        },
        created() {
            getTopicDetailInfo({id: this.$route.query.id})
            .then(res => {
                this.data = res
                console.log(this.data);
            })
        }
    }
</script>

<style lang="scss" scoped>
    .topicDetail{
        width: 100%;
        background: #f4f4f4;
        .header{
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
        }
        .info{
            width: 100%;
            margin-top: 1.226667rem;
        }
        .list{
            padding: 0 15px 20px 15px;
            .title{
                width: 100%;
                height: 80px;
                display: flex;
                .title-in{
                    margin: auto;
                    font-size: .4rem;
                    color: #999;
                }
            }
            .items{
                width: 100%;
                .item{
                    background: #fff;
                    padding: 10px;
                    margin-bottom: 15px;
                    img{
                        width: 100%;
                        height: 139px;
                    }
                    div{
                        font-size: .37333rem;
                        padding: 15px 0;
                    }
                }
            }
        }
    }
</style>
<style scoped>
    .topicDetail .info>>> img{
        width: 100%;
    }
</style>
